<template>
	<view class="yb-grid yb-flex" :id="customIdSync" :class="customClassSync" :style="customStyleSync" :render-whole="true">
		<view class="yb-flex yb-row yb-align-center yb-justify-between"
		v-for="(child, i) in list" :key="i"
		:style="{
			'margin-bottom': i < list.length - 1 ? Util.pixelunit(gap) : ''
		}">
			<view
			v-for="(item, index) in child" :key="index"
			:style="{
				'margin-right': index < child.length - 1 ? Util.pixelunit(gap) : ''
			}"
			class="yb-flex yb-flex-1">
				<slot :name="(i * column) + index"></slot>
			</view>
		</view>
	</view>
</template>

<script>
	import ComponentMixin from '../../js_sdk/componentMixin.js'
	import Util from '../../js_sdk/util.js'
	export default {
		name: 'YbGrid',
		mixins: [ComponentMixin],
		props: {
			data: {
				type: Array,
				default () {
					return new Array
				}
			},
			//列数
			column: {
				type: [Number,String],
				default: 3
			},
			gap: {
				type: [Number,String],
				default: 20
			},
			//最大显示数量 auto为无限制
			count: {
				type: [Number, String],
				default: 'auto'
			}
		},
		computed: {
			Util () {
				return Util
			},
			list () {
				const count = this.count >= 0 ? this.count : this.data.length
				const data = this.data.slice(0, count);
				const row = data.length > 0 ? Math.ceil(data.length / this.column) : 0
				const arr = new Array(row).fill(0)
				let list = []
				Object.keys(arr).forEach(key => {
					const end = ((parseInt(key) + 1) * this.column) < count ? ((parseInt(key) + 1) * this.column) : count
					let item = data.slice(parseInt(key) * this.column, end)
					if ( item.length < this.column ) {
						const sup = new Array(this.column - item.length).fill('')
						item = item.concat(sup)
					}
					list.push(item)
				})
				return list
			}
		}
	}
</script>

<style scoped>
</style>
